<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title th:text="${title}"></title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/app-style.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="/">文件管理</a>
            </li>
            <li class="nav-item" th:if="${isAdmin}">
                <a class="nav-link" href="/directory">目录管理</a>
            </li>
            <li class="nav-item" th:if="${isAdmin}">
                <a class="nav-link" href="/admin">账号管理</a>
            </li>
            <li class="nav-item" th:if="${isAdmin}">
                <a class="nav-link disabled" href="/swagger-ui.html" target="_blank">REST API 调用接口</a>
            </li>
            <a class="nav-link" href="/logout">退出系统</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" th:action="@{/search}">
            <input class="form-control mr-sm-2" type="search" placeholder="文件名" name="filename" id="filename">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>

<div class="alert alert-success" th:if="${message}">
    <h2 th:text="${message}"/>
</div>

<div class="table-responsive">
    <div th:if="${currentdirectory}">
        <a th:href="@{'/path@'+${currentdirectory.parentId}}"
           th:text="@{'返回上级目录'}"></a>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal">
            <i class="fas fa-cloud-upload-alt"></i>上传文件
        </button>

    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="uploadModal" th:if="${currentdirectory}">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">上传文件</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="table-responsive" style="text-align: center">
                        <form method="POST" enctype="multipart/form-data" th:action="@{'/uploadFile'}">
                            <table class="table table-hover">
                                <tr>
                                    <td align="right">文件分类:</td>
                                    <td>
                                        <select id="categoryId" name="categoryId" class="select custom-select">
                                            <option th:each="entry : ${categoryMap}"
                                                    th:value="${entry.key}"
                                                    th:text="${entry.value}">文件分类
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">需要上传的文件:</td>
                                    <td><input type="file" name="file" class="input custom-file"/></td>
                                </tr>
                                <tr>
                                    <td align="right">文件访问权限:</td>
                                    <td>
                                        <label><input id="owners" name="owners" type="checkbox"
                                                      value="PublicMode"/>全员共享</label>
                                        <label><input id="owners" name="owners" type="checkbox"
                                                      value="GroupMode"/>组内共享</label>
                                    </td>
                                </tr>
                            </table>
                            <input type="hidden" id="directoryId" name="directoryId"
                                   th:value="${currentdirectory.id}"/>
                            <input type="hidden" th:name="${_csrf.parameterName}"
                                   th:value="${_csrf.token}"/>
                            <input type="submit" value="上传" class="btn btn-success"/>
                        </form>
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>

    <table class="table table-striped table-hover">
        <thead class="thead-light">
        <tr>
            <th>文件名</th>
            <th>文件长度</th>
            <th>上传日期</th>
            <th>文件分类</th>
            <th>公开访问</th>
            <th>权限</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="directory : ${directories}">
            <td>
                <i th:if="${directory.childrenCount>0}" class="fas fa-folder"></i>
                <i th:if="${directory.childrenCount==0}" class="far fa-folder"></i>
                <a th:href="@{'/path@'+${directory.id}}" th:text="${directory.path}"/>
            </td>
            <td th:text="@{'文件夹'}" colspan="3"></td>
            <td>
                <span th:if="${directory.publicVisible}"><i class="fas fa-check"></i></span>
            </td>
            <td>
                <ul class="custom-list">
                    <li th:each="owner:${directory.owners}">
                        <span th:text="${owner.name}"></span>[
                        <span th:text="${ownerTypeMap[owner.type]}"></span>:
                        <span th:text="${privilegeMap[owner.privilege]}"></span>]
                    </li>
                </ul>
            </td>
            <td>
                <div class="input-group">
                    <a th:href="@{'/zip-resource/'+${directory.id}}" class="btn btn-dark">
                        <i class="fas fa-cloud-download-alt"></i>
                    </a>
                </div>
            </td>
        </tr>
        <tr th:each="file : ${files}">
            <form th:action="@{/deleteFile}" th:method="DELETE">
                <td>
                    <ul th:switch="${file.type}" class="custom-list">
                        <li th:case="pdf">
                            <a th:href="@{'/view-pdf/'+${file.storedId}}">
                                <i class="far fa-file-pdf"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="gif">
                            <a th:href="@{'/view-gif/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="jpg">
                            <a th:href="@{'/view-jpeg/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="jpeg">
                            <a th:href="@{'/view-jpeg/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="png">
                            <a th:href="@{'/view-png/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="bmp">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="tif">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="tiff">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-image"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="xls">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-excel"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="xlsx">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-excel"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="doc">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-word"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="docx">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-word"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="ppt">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-powerpoint"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="pptx">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-powerpoint"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="txt">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-text"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="mp3">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-audio"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="zip">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-archive"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="rar">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file-archive"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                        <li th:case="*">
                            <a th:href="@{'/download/'+${file.storedId}}">
                                <i class="far fa-file"></i>
                                <span th:text="${file.filename}"></span>
                            </a>
                        </li>
                    </ul>
                </td>
                <td th:text="${#numbers.formatInteger(file.size,3,'COMMA')}">文件大小</td>
                <td th:text="${#dates.format(file.uploadTime,'yyyy-MM-dd HH:mm:ss')}">上传日期
                </td>
                <td th:text="${categoryMap[file.categoryId]}">
                    <!--<select id="fileCategory" name="fileCategory" class="select custom-select"
                            readonly="true">
                        <option th:each="entry : ${categoryMap}"
                                th:value="${entry.key}"
                                th:text="${entry.value}"
                                th:selected="(${entry.key} == ${file.categoryId})">文件分类
                        </option>
                    </select>-->
                </td>
                <td>
                    <span th:if="${file.openVisible}"><i class="fas fa-check"></i></span>
                </td>
                <td>
                    <ul class="custom-list">
                        <li th:each="owner:${file.owners}">
                            <span th:text="${owner.name}"></span>[
                            <span th:text="${ownerTypeMap[owner.type]}"></span>:
                            <span th:text="${privilegeMap[owner.privilege]}"></span>]
                        </li>
                    </ul>
                </td>
                <td>
                    <div class="input-group">
                        <input type="hidden" id="fsDetailId" name="fsDetailId"
                               th:value="${file.id}"/>
                        <input type="hidden" id="directoryId" name="directoryId"
                               th:value="${currentdirectory.id}"/>
                        <input type="hidden" th:name="${_csrf.parameterName}"
                               th:value="${_csrf.token}"/>
                        <input type="submit" value="&#xf2ed" class="btn btn-danger far fa-trash-alt"/>
                        <a th:href="@{'/download/'+${file.storedId}}"
                           class="btn btn-dark">
                            <i class="fas fa-cloud-download-alt"></i>
                        </a>
                    </div>
                </td>
            </form>
        </tr>
        </tbody>
    </table>
</div>
<footer>
    <p>2018 &copy; Quick Doc 快捷文档共享</p>
</footer>

</body>
</html>